<template>
  <div style="height: 100%;width: 100%;display: flex;justify-content: center;align-items: center;background-color: darkseagreen">
    <div style="width: 400px; height: 400px;display: flex;justify-content: center;align-items: center;background-color: #ffffff">
      <el-form :model="form" status-icon  label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" >
          <el-input v-model.number="form.name"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input type="password" v-model="form.passwd" autocomplete="off" show-password></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login()">登录</el-button>
          <el-button type="primary" @click="goRegister()">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-dialog title="用户注册" :visible.sync="dialogFormVisible">
      <el-form :model="reForm" label-width="100px">
        <el-form-item label="用户名" >
          <el-input v-model="reForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" >
          <el-input type="password" v-model="reForm.passwd" autocomplete="off" show-password></el-input>
        </el-form-item>
        <el-form-item label="类别" >
          <el-select
          v-model="reForm.type"
          >
            <el-option value="管理员">管理员</el-option>
            <el-option value="普通员工">普通员工</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="电话" >
          <el-input v-model="reForm.tel" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="部门" >
          <el-input v-model="reForm.dpm" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="register">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import request from "@/utils/request";

// import axios from 'axios';

import {login, register} from "@/api/api";

export default {
  name: "Home",
  data() {
    return {
      dialogFormVisible:false,
      form:{

      },
      reForm:{

      },
    }
  },
  methods:{
    login(){
      login(this.form).then(res=>{
        if(res.msg === 'success' && res.user){
            this.$store.dispatch("setUser",res.user)
            sessionStorage.setItem("user",JSON.stringify(res.user))
            this.$router.push("/home")
        }else{
          this.$message.error("登录失败")
        }
      })

    },
    goRegister(){
      this.reForm = {}
      this.dialogFormVisible = true
    },
    register(){
      register(this.reForm).then(res=>{
        if(res == "exist"){
          this.$message.error("用户已存在")
        }else if (res == "success"){
          this.$message.success("注册成功")
          this.dialogFormVisible =false;
        }
      })

    }

  }









  // mounted() {
  //   this.drawLine();
  // },
  // methods: {
  //   drawLine() {
  //     // 基于准备好的dom，初始化echarts实例
  //     let myChart = this.$root.echarts.init(document.getElementById('myChart'))
  //     let option = {
  //       title: {
  //         text: '各地区用户比例统计图',
  //         subtext: '虚拟数据',
  //         left: 'left'
  //       },
  //       tooltip: {
  //         trigger: 'item'
  //       },
  //       legend: {
  //         orient: 'vertical',
  //         trigger: 'item',
  //         left: 'center'
  //       },
  //       toolbox: {
  //         show: true,
  //         feature: {
  //           mark: {show: true},
  //           dataView: {show: true, readOnly: false},
  //           restore: {show: true},
  //           saveAsImage: {show: true}
  //         }
  //       },
  //       series: [
  //         {
  //           name: '用户比例',
  //           type: 'pie',
  //           radius: [50, 150],
  //           center: ['50%', '60%'],
  //           roseType: 'area',
  //           itemStyle: {
  //             borderRadius: 8
  //           },
  //           data: []
  //         }
  //       ]
  //     }
  //     request.get("/user/count").then(res => {
  //       if (res.code === '0') {
  //         res.data.forEach(item => {
  //           option.series[0].data.push({name: item.address, value: item.count})
  //         })
  //         // 绘制图表
  //         myChart.setOption(option);
  //       }
  //     })

  //   }
  // }
}
</script>

<style scoped></style>
